<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
    <title>路由配置界面</title>
    <link type="text/css" rel="stylesheet" href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>'/>
    <link type="text/css" rel="stylesheet"
          href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>'/>
    <link type="text/css" rel="stylesheet" href='<spring:url value="/resources/css/style.min.css"/>'/>
    <link type="text/css" rel="stylesheet" href='<spring:url value="/resources/css/content.css"/>'/>
    <script src='<spring:url value="/webjars/jquery/1.11.1/jquery.min.js"/>'></script>
    <script src='<spring:url value="/webjars/bootstrap/3.3.5/js/bootstrap.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular.min.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular-resource.js"/>'></script>
    <script src='<spring:url value="/resources/js/util/jstree.min.js"/>'></script>
    <script src='<spring:url value="/resources/js/common/bootbox.min.js"/>'></script>
    <script src='<spring:url value="/resources/js/common/pageUtil.js"/>'></script>
    <script src='<spring:url value="/resources/js/route/RouteModel.js"/>'></script>
    <script src='<spring:url value="/resources/js/route/RouteService.js"/>'></script>
    <script src='<spring:url value="/resources/js/route/RouteController.js"/>'></script>
</head>
<body ng-app="routeApp" ng-controller="routeCtrl">
<div class="col-md-2" style="height:100%;overflow-y: auto;background-color: #D7D7D7;">
    <div id="gwUserTree" class="route-tree"></div>
</div>
<div class="col-md-10">
    <div class="route-container">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb">
                        <li class="active">用户管理</li>
                        <li class="active">路由配置</li>
                        <li class="active">{{userName}}</li>
                    </ol>
                    <form class="form-inline">

                        <div class="input-group">
                            <input type="text" class="form-control" id="routeName" ng_model='routeName'
                                   placeholder="路由名称">
                        </div>
                        <div class="input-group">
                            <select class="form-control" ng-model="routeType" ng-init="routeType='-1'">
                                <option value='-1' selected>All</option>
                                <option value='0'>DownLink</option>
                                <option value='1'>UpLink</option>
                                <option value='2'>Ground</option>
                            </select>
                        </div>
                        <button type="submit" ng-click="queryRoute()" class="btn btn-primary ">查询</button>
                        <button type="button" ng-click="deleteSeletedRoute()" class="btn btn-danger ">批量删除</button>
                        <button type="button" style="float: right" class="btn btn-success " ng-click="createRoute()">新增
                        </button>
                    </form>
                    <div style="overflow: auto;">
                        <table class="table table-bordered table-striped  table-condensed table-hover">
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" ng-model="selectBatch">
                                </th>
                                <th>路由名称</th>
                                <th>路由类型</th>
                                <th>发送地址</th>
                                <th>接收地址</th>
                                <th>SMI</th>
                                <th>航班号</th>
                                <th>机尾号</th>
                                <th>RGS</th>
                                <th>起始位</th>
                                <th>关键字</th>
                                <th>目的地址</th>
                                <th>编辑</th>
                                <th>删除</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="route in routeList">
                                <td style="vertical-align: middle;width: 3%">
                                    <input name="checks" ng-checked="selectBatch" type="checkbox" value="{{route.id}}">
                                </td>
                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle;width: 8%"
                                    data-toggle="tooltip" data-placement="top" title="{{route.name}}">{{ route.name }}
                                </td>
                                <td style="vertical-align: middle;width: 6%" ng-if="route.type==0">DownLink</td>
                                <td style="vertical-align: middle;width: 6%" ng-if="route.type==1">UpLink</td>
                                <td style="vertical-align: middle;width: 6%" ng-if="route.type==2">Ground</td>
                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle;width: 8%"
                                    data-toggle="tooltip" data-placement="top" title="{{route.sendAddress}}">{{
                                    route.sendAddress }}
                                </td>
                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle;width: 8%"
                                    data-toggle="tooltip" data-placement="top" title="{{route.recvAddress}}">{{
                                    route.recvAddress }}
                                </td>
                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle;width: 8%"
                                    data-toggle="tooltip" data-placement="top" title="{{route.smi}}">{{ route.smi }}
                                </td>
                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle;width: 8%"
                                    data-toggle="tooltip" data-placement="top" title="{{route.fi}}">{{ route.fi }}
                                </td>
                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle;width: 8%"
                                    data-toggle="tooltip" data-placement="top" title="{{route.an}}">{{ route.an }}
                                </td>
                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle;width: 8%"
                                    data-toggle="tooltip" data-placement="top" title="{{route.rgs}}">{{ route.rgs }}
                                </td>
                                <td style="vertical-align: middle;width: 6%">{{ route.specIndex }}</td>
                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle;width: 8%"
                                    data-toggle="tooltip" data-placement="top" title="{{route.specLable}}">{{
                                    route.specLable }}
                                </td>
                                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle;width: 9%"
                                    data-toggle="tooltip" data-placement="top" title="{{route.destinationName}}">{{
                                    route.destinationName }}
                                </td>
                                <td style="vertical-align: middle;width: 6%">
                                    <button class="btn btn-info btn-xs" ng-click="updateRoute(route)">
                                        <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;修改
                                    </button>
                                </td>
                                <td style="vertical-align: middle;width: 6%">
                                    <button class="btn  btn-danger btn-xs" ng-click="deleteRoute(route.id)">
                                        <span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;删除
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <nav style="margin-top: 30px" class="form-inline">
                        <ul class="pagination">
                            <li id="top" class="input-group">
                                <a ng-click="firstPage()">
                                    <span>首页</span>
                                </a>
                            </li>
                            <li id="previous" class="input-group">
                                <a ng-click="previous()">
                                    <span>上一页</span>
                                </a>
                            </li>
                            <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" class="input-group">
                                <a ng-click="selectCurrentPage(page)" class="form-control">{{ page }}</a>
                            </li>
                            <li id="next" class="input-group">
                                <a ng-click="next()">
                                    <span>下一页</span>
                                </a>
                            </li>
                            <li id="bottom" class="input-group">
                                <a ng-click="lastPage()">
                                    <span>尾页</span>
                                </a>
                            </li>
                            <li class="input-group">
                                <%--可设置默认条数--%>
                                <select ng-model="selectPageSize" style="height: 34px;" class="form-control"
                                        ng-init="selectPageSize='10'"
                                        ng-change="changePageSize(selectPageSize)">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <%--新增弹框--%>
    <div class="modal fade bs-example-modal-lg" id="dialogRoute" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel"
         style="margin-top: 100px;pxoverflow-y: auto" data-backdrop="static">
        <div class="modal-dialog modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title">
                        <span id="glyphicon" class="glyphicon glyphicon-plus" aria-hidden="true"></span>{{title}}
                    </h4>
                </div>
                <div class="modal-body" style="padding: 45px;">
                    <form name="routeForm" id="routeForm" method="post">
                        <input type="hidden" id="id" name="id" ng-model="route.id" ng-init="route.id='0'">

                        <div class="row">
                            <label class="col-md-2" for="name">名称</label>

                            <input class="col-md-4" type="text" class="form-control" id="name" name="name"
                                   ng-model="route.name" required ng-blur="checkName(route.name)" ng-maxlength="50"
                                   ng-inti="route.name=''" placeholder="请输入路由名称">
                            <label class="col-md-2" for="type">路由类型</label>
                            <select class="col-md-4" name="type" id="type" class="form-control" ng-change="clear()"
                                    ng-model="route.type" ng-init="route.type='0'">
                                <option value='0'>DownLink</option>
                                <option value='1'>UpLink</option>
                                <option value='2'>Ground</option>
                            </select>
                        </div>
                        <div>
                            <small class="error" ng-show="routeForm.name.$error.pattern">
                                <span class="font-style">请输入大写字母、数字、_、-</span>
                            </small>
                            <small class="error" ng-show="routeForm.name.$error.maxlength">
                                <span class="font-style">最大长度50</span>
                            </small>
                            <small class="error" ng-show="routeForm.name.$error.unique">
                                <span class="font-style">路由名称已存在</span>
                            </small>
                        </div>
                        <div class="row" style="margin-top: 20px">
                            <label class="col-md-2" for="sendAddress">发送地址</label>
                            <input class="col-md-4" id="sendAddress" name="sendAddress" ng-blur="change(true)"
                                   ng-focus="change(false)" type="text" ng-maxlength="7"
                                   ng-pattern="/^[0-9|A-Z|\*]{7}$/"
                                   ng-if="route.type=='0'||route.type=='1'" ng-model="route.sendAddress">
                            <input class="col-md-4" type="text" ng-if="route.type=='2'" disabled="disabled">
                            <label class="col-md-2" for="recvAddress">接收地址</label>
                            <input class="col-md-4" id="recvAddress" name="recvAddress" type="text"
                                   ng-blur="change(true)"
                                   ng-focus="change(false)" ng-if="route.type=='0'||route.type=='1'"
                                   ng-model="route.recvAddress" ng-maxlength="300"
                                   ng-pattern="/^[0-9A-Z*]{7}(?:,[0-9A-Z*]{7})*$/">
                            <input class="col-md-4" type="text" ng-if="route.type=='2'" disabled="disabled">

                            <div class="col-md-6">
                                <small class="error" ng-show="routeForm.sendAddress.$error.maxlength && changed">
                                    <span class="font-style">最大长度7</span>
                                </small>
                                <small class="error" ng-show="routeForm.sendAddress.$error.pattern && changed">
                                    <span class="font-style">请输入大写字母、数字或*,长度7位</span>
                                </small>
                            </div>
                            <div class="col-md-6">
                                <small class="error" ng-show="routeForm.recvAddress.$error.maxlength  && changed">
                                    <span class="font-style">最大长度300</span>
                                </small>
                                <small class="error" ng-show="routeForm.recvAddress.$error.pattern  && changed">
                                    <span class="font-style">请输入大写字母、数字或者* 7位一组 多个以英文逗号间隔</span>
                                </small>
                            </div>
                        </div>

                        <div class="row" style="margin-top: 20px">
                            <label class="col-md-2" for="smi">SMI</label>
                            <input class="col-md-4" id="smi" name="smi" type="text"
                                   ng-if="route.type=='0'||route.type=='1'"
                                   ng-model="route.smi" placeholder="多个请以英文逗号间隔" ng-maxlength="100"
                                   ng-blur="change(true)"
                                   ng-focus="change(false)" ng-pattern="/^[0-9A-Z*]{3}(?:,[0-9A-Z*]{3})*$/">
                            <input class="col-md-4" type="text" ng-if="route.type=='2'" disabled="disabled">
                            <label class="col-md-2" for="fi">航班号</label>
                            <input class="col-md-4" id="fi" name="fi" type="text" ng-if="route.type=='0'"
                                   ng-maxlength="100"
                                   placeholder="多个请以英文逗号间隔" ng-blur="change(true)" ng-focus="change(false)"
                                   ng-model="route.fi" ng-pattern="/^[0-9A-Z*]{6,7}(?:,[0-9A-Z*]{6,7})*$/">
                            <input class="col-md-4" type="text" ng-if="route.type=='1'||route.type=='2'"
                                   disabled="disabled">
                        </div>
                        <div class="col-md-6">
                            <small class="error" ng-show="routeForm.smi.$error.maxlength && changed">
                                <span class="font-style">最大长度100</span>
                            </small>
                            <small class="error" ng-show="routeForm.smi.$error.pattern && changed">
                                <span class="font-style">请输入大写字母、数字或者* 3位一组 多个以英文逗号间隔</span>
                            </small>
                        </div>
                        <div class="col-md-6">
                            <small class="error" ng-show="routeForm.fi.$error.pattern && changed">
                                <span class="font-style">请输入大写字母、数字或者*，多个以英文逗号间隔</span>
                            </small>
                            <small class="error" ng-show="routeForm.fi.$error.maxlength && changed">
                                <span class="font-style">最大长度100</span>
                            </small>
                        </div>

                        <div class="row" style="margin-top: 20px">
                            <label class="col-md-2" for="an">机尾号</label>
                            <input class="col-md-4" id="an" name="an" type="text" ng-blur="change(true)"
                                   ng-focus="change(false)" ng-if="route.type=='0'||route.type=='1'" ng-model="route.an"
                                   ng-maxlength="100" ng-pattern="/^[0-9A-Z\-\*]+(?:,[0-9A-Z\-\*]+)*$/">
                            <input class="col-md-4" type="text" ng-if="route.type=='2'" disabled="disabled">
                            <label class="col-md-2" for="rgs">RGS</label>
                            <input class="col-md-4" id="rgs" name="rgs" type="text" ng-if="route.type=='0'"
                                   ng-model="route.rgs" placeholder="多个请以英文逗号间隔" ng-blur="change(true)"
                                   ng-focus="change(false)" ng-maxlength="100" ng-pattern="/^[0-9A-Z*,]*$/">
                            <input class="col-md-4" type="text" ng-if="route.type=='1'||route.type=='2'"
                                   disabled="disabled">
                        </div>
                        <div class="col-md-6">
                            <small class="error" ng-show="routeForm.an.$error.maxlength && changed">
                                <span class="font-style">最大长度100</span>
                            </small>
                            <small class="error" ng-show="routeForm.an.$error.pattern && changed">
                                <span class="font-style">请输入大写字母、数字或者- 多个以英文逗号间隔</span>
                            </small>
                        </div>
                        <div class="col-md-6">
                            <small class="error" ng-show="routeForm.rgs.$error.maxlength && changed">
                                <span class="font-style">最大长度100</span>
                            </small>
                            <small class="error" ng-show="routeForm.rgs.$error.pattern && changed">
                                <span class="font-style">请输入大写字母、数字或者*，多个以英文逗号间隔</span>
                            </small>
                        </div>

                        <div class="row" style="margin-top: 20px">
                            <label class="col-md-2" for="specLable">全文关键字</label>
                            <input class="col-md-4" type="text" class="form-control" id="specLable" name="specLable"
                                   ng-model="route.specLable" ng-pattern="/^[\u000a|\u000d|\u0020-\u007e]*$/"
                                   ng-maxlength="100" ng-blur="change(true)" ng-focus="change(false)">
                            <label class="col-md-2" for="specIndex">关键字起始位</label>
                            <input class="col-md-4" type="number" class="form-control" name="specIndex" id="specIndex"
                                   ng-model="route.specIndex" ng-init="route.specIndex=-1" ng-maxlength="10">
                        </div>
                        <div class="col-md-6">
                            <small class="error" ng-show="routeForm.specLable.$error.pattern && changed">
                                <span class="font-style">请输入符合620规范的字符</span>
                            </small>
                            <small class="error" ng-show="routeForm.specLable.$error.maxlength && changed">
                                <span class="font-style">最大长度100</span>
                            </small>
                        </div>
                        <div class="col-md-6">
                            <small class="error" ng-show="routeForm.specIndex.$error.maxlength && changed">
                                <span class="font-style">最大长度10</span>
                            </small>
                        </div>

                        <div class="row" style="margin-top: 20px">
                            <label class="col-md-2" for="destination">目的地址</label>
                            <input class="col-md-4" id="destination" name="destination" type="text"
                                   ng-if="route.type=='2'|| route.type=='1'" ng-model="route.destination"
                                   placeholder="多个请以英文逗号间隔" ng-pattern="/^[^[\u4e00-\u9fa5]*]*$/"
                                   ng-click="showDestinationDialog(route.destination)">
                            <input class="col-md-4" type="text" ng-if="route.type=='0'" disabled="disabled">
                        </div>
                        <div style="margin-left: 130px">
                            <small class="error" ng-show="routeForm.destination.$error.pattern">
                                <span class="font-style">禁止输入中文</span>
                            </small>
                        </div>

                        <div class="row" style="margin-top: 20px">
                            <div class="row" style="margin-top: 20px;padding-right: 5px">
                                <div class="col-md-2 col-md-offset-10">
                                    <button type="submit" ng-disabled="routeForm.$invalid" ng-click="save(route)"
                                            class="btn btn-primary">保存
                                    </button>
                                    <button type="button" ng-click="close()" class="btn btn-danger">
                                        取消
                                    </button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal  fade" id="dialogDestination" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     style="margin-top: 100px" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>用户列表
                </h4>
            </div>
            <div class="modal-body">
                <div style="height: 420px;border:1px solid #ccc;overflow: auto">
                    <input type="checkbox" ng-model="selectAll" id="selectAll"><span>全选/全不选</span>
                    <table>
                        <tr ng-repeat="x in userList track by $index">
                            <td>
                                <input type="checkbox" name="destinationUser" ng-checked="selectAll" value="{{x.id}}">
                            </td>
                            <td>{{x.userName}}</td>
                        </tr>
                    </table>
                </div>
                <div class="row" style="margin-top: 20px">
                    <div class="col-md-3 col-md-offset-9">
                        <button type="submit" ng-click="saveDestination()" class="btn btn-primary">确定</button>
                        <button type="button" ng-click="cancelDestination()" class="btn btn-danger">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
